<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <base href="http://localhost:8080/bookstore/">
    <style>
        .el-row {
            margin-bottom: 20px;
        }
        el-row>last-child {
             margin-bottom: 0;
         }
        .el-col {
            border-radius: 4px;
        }
        .bg-purple-dark {
            background: #99a9bf;
        }
        .bg-purple {
            background: #d3dce6;
        }
        .bg-purple-light {
            background: #e5e9f2;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
        .shop_size{
            width: 200px;
            height: 300px;
            float: left;
            margin: 10px;
        }
    </style>
</head>
<body>
<div id="app1">
    <el-row :gutter="20">
        <div class="shop_size" v-for="(book,index) in message.list">
                <div class="demo-image">
                    <el-image style="width: 150px; height: 180px" :src="book.imgPath" ></el-image>
                </div>
                <div>
                    <ul>
                        <li><span>书名：</span>{{book.name}}</li>
                        <li><span>价格：</span>{{book.price}}</li>
                        <li><span>库存：</span>{{book.stock}}</li>
                        <li><span>销量：</span>{{book.sales}}</li>
                        <li>
                            <el-button type="danger" round style="width: 100px;height: 30px" @click="shop(book)">购买</el-button>
                        </li>
                    </ul>
                </div>
        </div>
    </el-row>
    <!--    页面跳转标签-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[14, 28, 42]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
</body>
<link href="https:/cdn.staticfile.org/layui/2.8.0/css/layui.css" rel="stylesheet">
<script src="static/script/layui.js"></script>
<link rel="stylesheet" href="static/style/layui.css">
<script src="static/script/vue.js"></script>
<script src="static/script/axios-0.18.0.js"></script>
<link rel="stylesheet" href="static/style/bootstrap.min.css">
<link rel="stylesheet" href="static/style/purecss.css">
<link rel="stylesheet" href="static/style/prism.css">
<link rel="stylesheet" href="static/style/bulma.css">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link rel="stylesheet" href="element-ui-2.13.0/lib/theme-chalk/index.css">
<script src="element-ui-2.13.0/lib/index.js"></script>

<script>
    new Vue({
        el:"#app1",
        data(){
            return{
                message:{},
                total:100,
                currentPage:1,
                pageSize:14,
                user:[],
                isShowElement:false,
                formLabelWidth: '120px',
                editData: {},
                dialogTableVisible: false,
                dialogFormVisible: false,
                dialogFormVisible1:false,
                gridData: [],
                form:{}
            }
        },
        methods:{
            show(){
                var that = this;
                axios({
                    url:"BookServlet?action=queryAll&pageNo="+that.currentPage+"&size="+that.pageSize,
                    type:"post",
                    dataType:"json",
                }).then(function (response) {
                    if(response.status===200){
                        console.log(response.data.list)
                        that.message=response.data;
                        that.total=response.data.total;
                    }else{
                        alert("数据获取失败！！")
                    }
                },function (error) {
                    console.log(error)
                })
            },
            handleDelete(index,row){
                console.log(row.id)
                var id=row.id;
                var params=new URLSearchParams();
                params.append("id",id);
                axios.post("BookServlet?action=delete",params).then(response=> {
                    this.show();
                });
            },
            edit(index,row){
                console.log(row);
                console.log("1312312")
                axios.post("BookServlet?action=getBook",row).then(response=>{
                    console.log(response.data);
                    this.editData = response.data;
                })
            },
            getUser(){
                axios.post("UserServlet?action=getUser").then(response=>{
                    console.log("11111111111111111111111111111111111111111111111")
                    console.log(response)
                    console.log(response.data)
                    this.user=response.data;
                    this.isShowElement=false;
                })
            },
            logout(){
                console.log("注销")
                axios.post("UserServlet?action=logout").then(response=>{
                    console.log(2131);
                    console.log(response)
                })
            },
            //当前页面的最大数据量
            handleSizeChange(val) {
                // console.log(val);
                this.pageSize=val;
            },
            //分页函数
            // val参数获取当前点击的页数
            handleCurrentChange(val) {
                let _this=this;
                _this.currentPage=val;
                this.show();
            },
            shop(value){
                console.log(value)
                console.log("购物");
                axios.post("CartServlet?action=addBookToCart",value).then(response=>{
                    console.log(response);
                    console.log("添加购物订单");
                })
            }
        },created:function () {
            this.show();
            this.getUser();
        }
    })
</script>
</html>